import React,{ useEffect,useState } from 'react'
import {connect} from 'react-redux';
import {fetchCateNavListAction,fetchCateListAction} from '../../store/actions/wzdata'
import './index.scss'

const Category = (props) =>{
    const [catKey,setCatkey]=useState('1')
    const {fetchCateListAction,fetchCateNavListAction,cateNavList,cateList} = props;
    useEffect(()=>{
        fetchCateNavListAction();
        fetchCateListAction(1);

    },[fetchCateNavListAction,fetchCateListAction])
    const changeCodeKey = (code) =>{
        setCatkey(code);
        fetchCateListAction(code);
    }
    return<div className="cate_con">
    <div className="cate_left">
        <ul>
            {
                cateNavList.map(item => <li key={item.code} onClick={()=>{changeCodeKey(item.code)}} className={catKey === item.code ? "active":""}>{item.displayName}</li>)
            }
        </ul>
    </div>
    <div className="cate_content">
    <div className="cate_top"><span>价格</span></div>
    <div className="cate_shadow"></div>
    <div className="cate_right">
    <ul>
            {
                cateList.map((item) => <li key={item.key}>
                    <div className="cate_img"><img src={item.template.listImages} alt="" /></div>
                    <div className="cate_dec">
                        <span>{item.template.name}</span>
                        <span>{item.template.displayName}</span>
                        <span><img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/static/home/gift.png" alt="" /></span>
                        <span>￥{item.template.retailPrice}</span>
                        <div><img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/static/new/new_shopCart1.png" alt="" /></div>
                    </div>
                    
                </li>)

            }

        </ul>

    </div>
    </div>
   
</div>
}

    

export default connect(state => ({
    cateNavList:state.wzdata.cateNavList||[],
    cateList:state.wzdata.cateList||[],
}),{fetchCateNavListAction,fetchCateListAction})(Category);